<template>
	<div class="homePage_list clear2" :style="{'min-height':tableHeight+'px'}" ref='dataShow'>
		<div class="wdxq_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 2.4rem;" @click="fh"></i>
			<span class="flex1">{{$route.query.name}}</span>
			<i class="el-icon-arrow-left" style="float: right;margin-right: 4%;font-size: 2.4rem;opacity: 0;"></i>
		</div>
		<div class="homePage_content">
			<div class="homePage_div flex" v-for="(data,key) in datalist" @click="jump(data.auid)">
				<div class="homePage_img">
					<img :src="data.head_img_s" @error='(e)=>{e.target.src="../../../../../static/img/images/people.jpg"}' />
				</div>
				<div class="homePage_text flex1">
					<div class="homePage_text1 flex align_center">
						<span class="homePage_texts1" v-if="data.gender=='2'">{{data.username}}</span>
						<span class="homePage_texts1" v-else style="color: #4297ff;">{{data.username}}</span>
						<img :src="data.gender=='2'?'../../../../../static/img/images/home4.png':'../../../../../static/img/images/home5.png'" />
						<span class="homePage_texts2 transform09">实名</span>
					</div>
					<div class="homePage_text2 flex align_center">
						{{data.age}}岁<i class="transform09">|</i>{{data.height}}cm<i class="transform09">|</i>{{data.education}}<i class="transform09">|</i>{{data.place}}
					</div>
					<div class="homePage_text3">
						{{data.content}}
					</div>
				</div>
			</div>
			<div v-if="Math.ceil(totalRecords/5)==num" style="padding: 1rem 0;text-align: center;color: #8a8a8a;font-size: 1.2rem;">
	    		数据加载完毕
	    	</div>
			<div v-if="datalist.length==0">
				<div class="zwpt">
					<img src="../../../../static/img/images/zwtp.png" />
					<p>暂无数据</p>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	require('swiper/dist/css/swiper.css');
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components: {
			swiper,
			swiperSlide
		},
		watch: {

		},
		props: [

		],
		data: function() {
			return {
				tableHeight: 0,
				choseI: 1,
				swiperOption: {
					autoplay: 5000,
					initialSlide: 1,
					loop: true,
					pagination: '.swiper-pagination',
					onSlideChangeEnd: swiper => {
						//						console.log('onSlideChangeEnd', swiper.realIndex)
					},
				},
				picture: ['../../../../../static/img/images/home2.jpg', '../../../../../static/img/images/home2.jpg'],
				datalist:[],
				totalRecords:0,
				num:1,
				sw:true,
			}
		},
		mounted() {
			this.tableHeight = document.body.offsetHeight;
			this.choseI=this.$route.query.type;
			this.getNearbyUserList();
			let _this=this;
			window.addEventListener('scroll',function(){ 
                // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度  
                // console.log(document.body.scrollTop); // 滚动高度  
                // console.log(document.body.offsetHeight); // 文档高度  
                // 判断是否滚动到底部  
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                if(scrollTop + window.innerHeight >=( _this.$refs.dataShow.offsetHeight-50)) { 
                    // 如果开关打开则加载数据  
                    
                    if(_this.sw==true){  
                        // 将开关关闭  
                        _this.sw = false;  
                        _this.getIndexList2()
                        
                        
                    }  
                }  
            }); 
		},
		methods: {
			fh(){
        		window.history.go(-1);
        	},
			sousuo(){
				this.$router.push({
					path: '/ss',
				})
			},
			jump(auid){
				this.$router.push({
					path: '/homePagedatil',
					query: {
						'id':auid
					}
				})
			},
			getIndexList2(){
				if(this.totalRecords==0){
					setTimeout(()=>{
						this.getIndexList2()
					},1000)
				}
        		if(Math.ceil(this.totalRecords/5)<=this.num){
        			return false
        		}
        		
        		this.num=this.num+1;
        		this.$http.post(this.defines.getNearbyUserList, {
						uid: window.uid ,
						type:this.choseI,
						page:this.num,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.datalist=this.datalist.concat(data.data.data.list);
        					this.sw = true;  
									
						},
						(error) => {
							console.log(error);
						}
					);
        	},
			chose_i(type) {
				if(this.choseI == type){
					return false
				}
				else{
					this.choseI = type;
				}
				
				
				this.getNearbyUserList();
			},
			bannerList() {
				this.$http.post(this.defines.getIndexLunList, {
						uid: window.uid
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.picture=data.data.data.list;
							
							
							
						},
						(error) => {
							console.log(error);
						}
					);

			},
			getNearbyUserList() {
				const loading=this.$loading({
		          lock: true,
		          text: 'Loading',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
				this.$http.post(this.defines.getNearbyUserList, {
						uid: window.uid ,
						type:this.choseI
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.datalist=data.data.data.list;
							this.totalRecords=parseInt(data.data.totalRecords);
							loading.close();		
						},
						(error) => {
							console.log(error);
						}
					);

			},
		}
	}
</script>

<style scoped>
	.banner {
		width: 100%;
		position: relative;
		z-index: 2
	}
	
	.banner .swiper-slide img {
		width: 100%;
	}
	
	.clear2:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	
	.clear2 {
		zoom: 1
	}
	
	.homePage_list {
		width: 100%;
		position: relative;
		overflow: hidden;
		background: #e7e9ee;
	}
	
	.homePage_title {
		width: 100%;
		padding: 1% 0;
		position: relative;
		background: #fff;
	}
	
	.homePage_title span {
		color: #505050;
		font-size: 1.5rem;
		margin: 0 3%;
		padding: 4px 0;
	}
	
	.homePage_titleActive {
		font-size: 1.5rem !important;
		color: #b042ff !important;
		position: relative;
	}
	
	.homePage_titleActive:after {
		position: absolute;
		bottom: 1px;
		left: -1.5px;
		content: '';
		width: 100%;
		height: 0px;
		border-radius: 2px;
		border: 1.5px solid #b042ff;
	}
	
	.homePage_titleImg {
		width: 1.7rem;
		position: absolute;
		right: 2.8%;
		top: 50%;
		margin-top: -0.85rem;
	}
	
	.homePage_content {
		padding: 0 2%;
		width: 96%;
	}
	
	.homePage_div {
		background: #fff;
		border-radius: 0.5rem;
		padding: 3%;
		width: 94%;
		margin-top: 2%;
	}
	
	.homePage_img {
		width: 6rem;
		border-radius: 0.5rem;
		overflow: hidden;
		height: 6rem;
		margin-right: 4%;
		
	}
	
	.homePage_img img {
		height: 6.7rem;
		display: block;
		width: 6.7rem;
		object-fit: cover;
	}
	
	.homePage_text1 {
		height: 2.5rem;
	}
	
	.homePage_text1 img {
		margin: 0 2%;
		height: 1.2rem;
	}
	
	.homePage_texts1 {
		font-size: 1.3rem;
		color: #42475c;
		overflow: overlay;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.homePage_texts2 {
		white-space: nowrap;
		color: #fff;
		background: #4297ff;
		border-radius: 3px;
		padding: 0px 2px;
		font-size: 12px;
		white-space: nowrap;
	}
	
	.homePage_text2 {
		font-size: 12px;
		color: #8a8a8a;
		height: 1.5rem;
		line-height: 1.5rem;
		margin-bottom: 0.3rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.homePage_text2 i {
		color: #505050;
		font-size: 1rem;
		font-weight: bold;
		padding: 0 3px;
		font-style: inherit;
	}
	
	.homePage_text3 {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 1.2rem;
		line-height: 1.7rem;
		height: 1.7rem;
		color: #666978;
		width: 100%;
	}
	.zwpt{
		width: 30%;
		margin: 0 auto;
		margin-top: 20%;
		
	}
	.zwpt img{
		width: 100%;
		display: block;
		opacity: 0.2;
		
	}
	.zwpt p{
		font-size: 15px;
		color: #8a8a8a;
		text-align: center;
		line-height: 30px;
	}
</style>
<style>
	.banner img{
		display: block;
	}
</style>